<template>
  <div class="applyFund">
    <!-- 筛选 -->
    <div class="search">
        <el-input v-model="iptvalue" placeholder="请输入搜索关键字" :style="{width:'300px'}"/>
       <!-- <div class="block"> -->
    <!-- <span class="demonstration">时间筛选：</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker> -->
  <!-- </div> -->
      <el-select v-model="valuetwo" placeholder="请选择部门">
        <el-option
          v-for="item in optionstwo"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="success" plain @click="handlesearch">提交</el-button>
      <el-button type="warning" @click="handleAll">全部</el-button>
  </div>
  <el-divider></el-divider>
  <!-- 详情列表 -->
  <div class="change">
    <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
      <el-button type="primary" @click="handleshow(0)" >增加</el-button>
      <el-button type="primary" @click="handleshow(1)" >修改</el-button>

      <el-button type="danger" icon="el-icon-delete" circle @click='removeFund'></el-button>
    </div>

 <!-- //  表格 -->
    <Table v-bind:tableData="tableData" @remove='getremove'/>
  <!-- 翻页 -->
  <el-pagination
  background
  layout="prev, pager, next"
  :total="totle"
  @next-click="nextPage"
  @prev-click="prePage">
</el-pagination>
 <!-- 模态框 -->
      <Fundfrom
      :dialogVisible="dialogVisible"
      @close="cancelfrom"
      :n = n
      @save='handleaddlist'
      :changobj='changobj'
      />
<!-- 弹出框 -->
  <el-dialog
  title="提示"
  :visible.sync="dialog"
  width="30%"
  :before-close="handleClose">
  <span>请选择一条信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog = false">取 消</el-button>
    <el-button type="primary" @click="dialog = false">确 定</el-button>
  </span>
</el-dialog>

</div>

</template>

<script>
import Table from './components/table.vue'
import Fundfrom from './components/fundfrom.vue'
import { getfundList, pageTwo } from '../../api/officeCenter/fund'

export default {
  data() {
    return {
      dialog: false,
      input: '',
      valueone: '',
      dialogVisible: false,
      // 部门筛选
      optionstwo: [],
      // 日期时间选择
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          },
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          },
        }],
      },
      valuetwo: '',
      tableData: [],
      totlePage: 0,
      page: 0,
      totle: 0,
      iptvalue: '',
      // value1: '',
      list: [],
      n: 0,
      removelist: [],
      changobj: {},
    }
  },
  components: {
    Table,
    Fundfrom,
  },
  methods: {
    handleClose(done) {
      this.$confirm('请选择一项修改')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancelfrom() {
      this.dialogVisible = false
    },
    handleshow(n) {
      this.n = n
      if (this.n === 0) {
        this.changobj = null
      }
      if (this.n === 1) {
        if (this.removelist.length > 1 || this.removelist.length === 0) {
          this.handleClose()
          return
        }
        this.changobj = this.removelist[0]
      }
      this.dialogVisible = true

      // console.log(this.n)
    },
    // 获取第一页列表数据
    async getfunflist() {
      const res = await getfundList()
      console.log(res.totle)
      this.tableData = res.list
      this.list = res.list
      this.totlePage = res.totlepage
      this.page = res.page
      this.totle = res.totle
      res.list.forEach(item => {
        const obj = {
          value: item.department,
          label: item.department,
        }
        this.optionstwo.push(obj)
      })
    },
    // 实现翻页
    async nextPage() {
      const res = await pageTwo()
      console.log(res)
      this.tableData = res.list
      this.page = res.page
    },
    prePage() {
      this.getfunflist()
    },
    // 实现搜索
    handlesearch() {
      if (this.iptvalue || this.valuetwo) {
        this.tableData = this.list
        const res = this.tableData
        const arr = res.filter(item => {
          item.id = ''
          return JSON.stringify(item).includes(this.iptvalue + this.valuetwo)
        })
        this.tableData = arr
      }
      if (!this.iptvalue && !this.valuetwo) {
        this.tableData = this.list
      }
      // console.log(this.valuetwo)
    },
    handleAll() {
      this.iptvalue = ''
      this.valuetwo = ''
      this.tableData = this.list
    },
    // 实现增加
    handleaddlist(from) {
      if (this.n === 0) {
        // console.log(from)
        this.tableData.push(from)
      }
      if (this.n === 1) {
        this.tableData = this.tableData.map(item => {
          if (item.id === from.id) {
            item = from
          }
          return item
        })
      }
    },
    // 实现删除
    getremove(list) {
      this.removelist = list
    },
    removeFund() {
      this.removelist.forEach(item => {
        this.tableData = this.tableData.filter(group => {
          return group.id !== item.id
        })
      })
      console.log(this.tableData)
    },
    // 实现修改
  },
  created() {
    this.getfunflist()
  },
}
</script>

<style lang="less" scoped>
.applyFund{
  width: 100%;
  .search{
  width: 50%;
  display: flex;
  justify-content: space-around;
}
}
.change{
  width: 400px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

</style>
